<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>欢迎来到课程管理系统</title>

<!-- 引入bootstrap样式 -->
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

<!-- 引入index页面的css样式表 -->
<link href="../static/css/index.css" th:href="@{/css/index.css}" rel="stylesheet">

<!-- jquery -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script>
$(function(){
	loginSpot=document.getElementById("loginSpot");
	var identify = 0;
	$("#loginbtn").click(function(){
        loginSpot.style.width="450px";
        loginSpot.style.top="200px";
        loginSpot.style.right="50px";
        loginSpot.style.height="350px";
        loginSpot.style.backgroundColor="rgba(35,35,35,0.9)";
        loginON=true;
	});
    naviON=false;
    loginON=false;
    userCheck=false;
    passCheck=false;
    $("#registbtn").click(function(){
        if(naviON)
            registerBlock();
        else
            registerOpen();
    });

	$("#loginBtnStu").click(function(){
		$("#userId").blur();
		$("#password").blur();
		if(passCheck == true && userCheck == true){
			identify = 0;
			$("#identify").val(identify);
			$("#mForm").submit();
		}else{
			return false;
		}
		
		
	});
	
	$("#loginBtnTea").click(function(){
		 $("#userId").blur();
		 $("#password").blur();
		if(passCheck == true && userCheck == true){
			identify = 1;
			$("#identify").val(identify);
			$("#mForm").submit();
		}else{
			return false;
		}
		
	});

    $("#userId").blur(
        function () {
            var  str=/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im;
            var userId=document.getElementById('userId').value;
            var alertMsg=document.getElementById('alertMsg');
            if(userId==="") {
                alertMsg.innerHTML = "账号不能为空";
                userCheck=false;
            }
            else if(str.test(userId))
			{
			    alertMsg.innerHTML="不能输入非法符号";
                userCheck=false;
			}
            else
			{
			    alertMsg.innerHTML="&nbsp;";
			    userCheck=true;
			}
        }
    );
    $("#password").blur(
        function () {
            var password=document.getElementById('password').value;
            var alertMsg=document.getElementById('alertMsg1');
            if(password==="")
			{
			    alertMsg.innerHTML="密码不能为空";
                passCheck=false;
			}
            else
            {
                alertMsg.innerHTML="&nbsp;";
                passCheck=true;
            }
        }
	);
});



function disappear()
{
    loginSpot.style.width=0;
    loginSpot.style.top=0;
    loginSpot.style.height=0;
    loginSpot.style.right=0;
    loginSpot.style.backgroundColor="rgba(35,35,35,0)";
    loginON=false;
    userCheck = false;
    passCheck = false;
    document.getElementById('alertMsg').innerHTML="&nbsp;";
    document.getElementById('alertMsg1').innerHTML="&nbsp;";
}

function registerOpen() {
    var naviBar=document.getElementById('naviBar');
    var registerInfor=document.getElementById('registerInfor');
    naviBar.style.height="140px";
    registerInfor.style.display='block';
    naviON=true;

   setTimeout(registerBlock,3000);
}
function registerBlock() {
    var naviBar=document.getElementById('naviBar');
    var registerInfor=document.getElementById('registerInfor');
    naviBar.style.height="100px";
    registerInfor.style.display='none';
    naviON=false;
}

$(function(){
    $(window).keydown(function (event) {
        if (event.keyCode == 27) {
            if(loginON)
            {
                disappear();
            }
            else if (naviON)
                registerBlock();

        }
    });
});

//function checkNull() {
//
//    var userId=document.getElementById('userId');
//    var password=document.getElementById('password');
//    var loginCircle=document.getElementById('loginCircle');
//
//	if(userId.value==""||password.value=="")
//	{
//		loginCircle.display='none';
//		return false;
//	}
//	else if(!userId.value.test(str))
//	{
//	    return true;
//	}
//
//
//}

</script>
</head>
<body>

<!--this is navigation part-->
<nav class="navBar " id="naviBar">
	<div class="containerFluid" >
		<div class="naviBrand">
			<h2 style="color: #7EC0EE;">fengwuJ</h2>
			<h2 style="color: white;">&nbsp;&nbsp;Design</h2>
		</div>
		<ul id="myNavibar">
			<li ><a href="#">首页</a></li>
			<li ><a href="#">介绍</a></li>
			<li ><a href="#">联系我们</a></li>
		</ul>
		<div style="float: right;padding-right: 10px;padding-top:37.5px;">
		<div style="float:left;position: relative">
		<button class="btn btn-default" style="width:60px; background:#212121; border-radius: 25px;border: 2px solid #4169E1;" id="loginbtn">
			<span style="color: white;">登录</span>
		</button>
			<div class="col-lg-4 col-center-block panel panel-default col-sm-4" id="loginSpot">
				<div id="loginCircle">
				<div class="bs-example bs-example-form" role="form">
					<div class="cha" onclick="disappear();"></div>
					<h1 class="title" style="color: white;">课程管理系统</h1>
					<form action="main" method="post" id="mForm">
						<div class="input-group">
							<span class="input-group-addon">账号</span>
							<input type="text" class="form-control" name="userId" id="userId" placeholder="请使用学号或教师编号登录" >
						</div>
						<p id="alertMsg">&nbsp;</p>
						<div class="input-group">
							<span class="input-group-addon">密码</span>
							<input type="password" class="form-control passwd" id="password" placeholder="您的初始密码为编号后六位" name="password">
						</div>
						<p id="alertMsg1">&nbsp;</p>
						<div style="display: none;">
							<input name="identify" id="identify"/>
						</div>
						<!--<div style="width:100%;margin: 0px auto;margin-top: 5%;">-->
						<!--<label style="margin-left: 25%;">-->
						<!--<input name="identify" type="radio" value="0" checked="checked" />学生-->
						<!--</label>-->
						<!--<label style="margin-left: 30%;">-->
						<!--<input name="identify" type="radio" value="1" />教师-->
						<!--</label>-->
						<!--</div>-->
						<div class="button0 input-group">
							<!--input-group submit col-lg-12 col-sm-12 col-xs-12-->
							<button class="btn-success btn-lg" id="loginBtnStu" >学生登录</button>
							<button class="btn-success btn-lg" id="loginBtnTea" >教师登录</button>
						</div>
					</form>
				</div>
			</div>
			</div>
		</div>
		<div style="float:left;margin-left: 10px;">
		<button class="btn btn-primary" style="width:60px; border-radius: 25px;" id="registbtn">注册</button>
		</div>
		</div>
		<div id="registerInfor"><span>本系统与高校学生信息对接，不提供个人注册</span> </div>

	</div>



</nav>
<!--this is the end of navigation part-->



	<div class="container" style="width: 100%;" >

	<div class="containerFluid"><h1 style="margin-left: 0;">课程管理系统</h1><br><h4 style="margin-left: 0;">专为高效师生量身设计</h4></div>
		<!--<img src="../static/image/pic0.jpeg" th:src="@{/static/image/pic0.jpeg}"></img>-->

	</div>
<!--this is the footer area-->
<div class="jumbotron text-center " style="margin-bottom:0;background:#212121;height: 300px;">
	<div style="width: 70%; margin: 0 auto;">
		<div style="float: left; "><span style="color: white;"><h3>我一直在进步</h3></span><br><span style="color: #C9C9C9">尽力将自己做得更好</span><br><span style="color: #C9C9C9">学习，本就永无止境</span><br><span style="color: #C9C9C9">无论取得什么成就，都不会是停下的理由</span></div>
		<div style="float: right; "><span style="color: white;"><h3>联系作者</h3></span><br><span style="color: #C9C9C9">联系地址：重庆市南岸区重庆邮电大学</span><br><span style="color: #C9C9C9">联系电话：1872313xxxx</span><br><span style="color: #C9C9C9">联系邮箱：fengwuJ@gmail.com</span></div>
	</div>

	<div style="margin-top: 200px;">
		<div><span style="color: #ABABAB;">@2018fengwuJ所有</span></div>
		<div><span style="color: #ABABAB;">手机版|本站由自主编码搭建|管理登录|</span></div>
	</div>
</div>

<!--this is the end of footer area-->

<script>

</script>
</body>
</html>